<template>
  <div class="messageBoxFather">
    <div class="messageContentTitle">
      <div class="friendName" v-if="chatWithObj">
        <span
          style="font-weight:1000;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">{{ chatWithObj.nick }}</span>
        <p style="font-size: 0.06rem;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">
          {{ chatWithObj.username }}</p>
      </div>
      <div>
        <a-input-search placeholder="搜索聊天记录" v-model="searchWord" style="100%" @search="onSearchFirst" />
      </div>
    </div>
    <div class="screenBox">
      <div class="fenyeqi">
        <!-- <div class="block">
          <el-pagination :small='true' v-if="messageData.length !== 0" :hide-on-single-page="total < limit"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="offset"
            :page-size="limit" layout="total,prev,next,jumper" :total="total">
          </el-pagination>
          <span style="height:20px;">共 {{ Math.ceil(total / limit) }}页</span>
        </div> -->
      </div>
      <div class="messageBox" @scroll="throttleFn" ref="messageRef2" id="ddddqq2" v-if="messageData">
        <el-button class="dayin" style="float:right;" type="text" @click="printPdf" :title="$t('wechat.openPrint')" ><i
            class="el-icon-printer"></i> {{$t('wechat.dayinSms')}}</el-button>

        <!-- 系统消息提示区 -->
        <div v-for="(item, index) in messageData" :key="index" style="overflow: hidden;margin-top: 20px;">

          <!-- ******************************************* 接 收 区 ******************************************************* -->

          <!-- left -->
          <div v-if="item.issend == 0">

            <div v-if="item.msgtype == 10000 || item.msgtype == 10002 || item.msgtype == 570425393" class="chat-sender"
              id="systemTips" style="margin-bottom:.2rem;margin-top:10px;">
              <div :title="formateHongBaoSystem(item)">{{ formateHongBaoSystem(item) }}</div>
            </div>

            <!-- Left --> <!-- 语音 -->
            <div v-else-if="item.msgtype == 34" class="chat-sender" style="margin-bottom:.2rem;margin-top:10px;">
              <div><img :src="item.contactavatar" @error="errorHandler"/></div>
              <div>{{ item.sendernick }}<span style="margin-left:.05rem;">{{ formDate(item.msgtime) }}</span> <span
                  style="color:red;" v-if="item.recovery == 1"><i style="font-weight:1000;"
                    class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div class="yuyin" @click="detailsAuideInfo(item)">
                <div class="chat-left_triangle"></div>
                <span><i class="iconfont icon-saying"></i> 语音气泡</span>
              </div>
            </div>
            <!-- Left --> <!-- 文本 -->
            <div v-else-if="item.msgtype == 1 || item.msgtype == 808180" class="chat-sender"
              style="margin-bottom:.2rem;margin-top:10px;">
              <div><img :src="item.contactavatar" @error="errorHandler"/></div>
              <div>{{ item.sendernick }}<span style="margin-left:.05rem;">{{ formDate(item.msgtime) }}</span> <span
                  style="color:red;" v-if="item.recovery == 1"><i style="font-weight:1000;"
                    class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div>
                <div class="chat-left_triangle"></div>
                <span style="word-wrap: break-word;" v-html='parsingEmoji(String(item.contant))'></span>
              </div>
            </div>
            <!-- Left --> <!-- 引用 -->
            <div v-else-if="item.msgtype == 499 || item.msgtype == -499" class="chat-sender"
              style="margin-bottom:.2rem;margin-top:10px;">
              <div><img :src="item.contactavatar" @error="errorHandler"/></div>
              <div>{{ item.sendernick }}<span style="margin-left:.05rem;">{{ formDate(item.msgtime) }}</span> <span
                  style="color:red;" v-if="item.recovery == 1"><i style="font-weight:1000;"
                    class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div>
                <div class="chat-left_triangle"></div>
                <span>{{ item.contant }}</span>
              </div>
            </div>
            <!-- Left --> <!-- 语音通话 -->
            <div v-else-if="item.msgtype == 50" class="chat-sender" style="margin-bottom:.2rem;margin-top:10px;">
              <div><img :src="item.contactavatar" @error="errorHandler"/></div>
              <div>{{ item.sendernick }}<span style="margin-left:.05rem;">{{ formDate(item.msgtime) }}</span> <span
                  style="color:red;" v-if="item.recovery == 1"><i style="font-weight:1000;"
                    class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div>
                <div class="chat-left_triangle"></div>
                <span>{{ formateAudioCall(item).text }}<i style="margin-left:15px;font-weight:1000;"
                    :class="formateAudioCall(item).icon"></i></span>
              </div>
            </div>
            <!-- Left --> <!-- 转发聊天记录 -->
            <div v-else-if="item.msgtype == 353 || item.msgtype == -19" class="chat-sender"
              style="margin-bottom:.2rem;margin-top:10px;">
              <div><img :src="item.contactavatar" @error="errorHandler"/></div>
              <div>{{ item.sendernick }}<span style="margin-left:.05rem;">{{ formDate(item.msgtime) }}</span> <span
                  style="color:red;" v-if="item.recovery == 1"><i style="font-weight:1000;"
                    class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div
                style="background:#fff;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);cursor: pointer;padding-bottom:2px;"
                @click="viewsMessageFriendList(messageRemrd(item.contant))">
                <!-- <div class="chat-left_triangle"></div> -->
                <span class="titleMessageBoxBox"
                  :title="messageRemrd(item.contant).desc">{{ messageRemrd(item.contant).desc }}</span>
                <div style="text-algin:left;width:100%;margin-left:12px;font-size:12px;color:#b3b2b2;">
                  <p>{{ messageRemrd(item.contant).desc }}</p>
                </div>
                <div class="bottomName">聊天记录</div>
              </div>
            </div>
            <!-- Left --> <!-- 图片 -->
            <div v-else-if="item.msgtype == 3 || item.msgtype == 2 || item.msgtype == 47" class="chat-sender"
              style="margin-bottom:.2rem;margin-top:10px;">
              <div><img :src="item.contactavatar" @error="errorHandler"/></div>
              <div>{{ item.sendernick }}<span style="margin-left:.05rem;">{{ formDate(item.msgtime) }}</span> <span
                  style="color:red;" v-if="item.recovery == 1"><i style="font-weight:1000;"
                    class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div style="text-indent: 0px;">
                <div class="demo-image__preview">
                  <el-image style="width:100%; height: 100%" :src="formateImg(item)" :preview-src-list="srcList">
                  </el-image>
                </div>
              </div>
            </div>
            <!-- Left --> <!-- 位置 -->
            <div v-else-if="item.msgtype == 48" class="chat-sender" style="margin-bottom:.2rem;margin-top:10px;">
              <div><img :src="item.contactavatar" @error="errorHandler"/></div>
              <div>{{ item.sendernick }}<span style="margin-left:.05rem;">{{ formDate(item.msgtime) }}</span> <span
                  style="color:red;" v-if="item.recovery == 1"><i style="font-weight:1000;"
                    class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div style="text-indent: 0px;">
                <div class="map">
                  <div class="mapTitle">
                    <div style="width: 100%;overflow:hidden;text-overflow:ellipsis;white-space: nowrap;">
                      {{ formdatePosition(item)._poiname }}</div>
                    <span
                      style="display:block;color:#6e6e6ea6;width:230px;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space: nowrap;">{{ formdatePosition(item)._label }}</span>
                  </div>
                  <p class="mapBox">
                    <position style="float:none;" v-if="formdatePosition(item)" :position="formdatePosition(item)" />
                  </p>
                </div>
              </div>
            </div>
            <!-- Left --> <!-- 名片 -->
            <div v-else-if="item.msgtype == 42" class="chat-sender" style="margin-bottom:.2rem;margin-top:10px;">
              <div><img :src="item.contactavatar" @error="errorHandler"/></div>
              <div>{{ item.sendernick }}<span style="margin-left:.05rem;">{{ formDate(item.msgtime) }}</span> <span
                  style="color:red;" v-if="item.recovery == 1"><i style="font-weight:1000;"
                    class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div style="background:#fff;text-indent: 0px;">
                <div class="nameCard" @click="viewsFriendCard(formateCard(item).msg)">
                  <div class="contentNameCard">
                    <img height="" :src="formateCard(item).msg._bigheadimgurl" alt="">
                    <div class="nameCardNameTExt">{{ formateCard(item).msg._nickname }}</div>
                  </div>
                  <div class="nameSiren">个人名片</div>
                </div>
              </div>
            </div>
            <!-- Left --> <!-- 文件 -->
            <div v-else-if="item.msgtype == 5" class="chat-sender" style="margin-bottom:.2rem;margin-top:10px;">
              <div><img :src="item.contactavatar" @error="errorHandler"/></div>
              <div>{{ item.sendernick }}<span style="margin-left:.05rem;">{{ formDate(item.msgtime) }}</span> <span
                  style="color:red;" v-if="item.recovery == 1"><i style="font-weight:1000;"
                    class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div style="background:#fff;text-indent: 0px;">
                <div class="nameCard" @click="downLoadFile(item.respath)">
                  <div class="contentNameCard">
                    <img height="" src="../../../assets/images/weChatQQ/file.png" alt="">
                    <div class="nameCardNameTExt">{{ item.contant }}</div>
                  </div>
                  <div class="nameSiren">点击打开文件</div>
                </div>
              </div>
            </div>
            <!-- left --> <!-- 红包2001 链接5 小程序33 共享位置17 转账2000 -->
            <div v-else-if="item.msgtype == 49" class="chat-sender" style="margin-bottom:.2rem;margin-top:10px;">
              <div><img :src="item.contactavatar" @error="errorHandler"/></div>
              <div>{{ item.sendernick }}<span style="margin-left:.05rem;">{{ formDate(item.msgtime) }}</span> <span
                  style="color:red;" v-if="item.recovery == 1"><i style="font-weight:1000;"
                    class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div v-if="formateHongBao(item).msg.appmsg.type == 2001"
                style="background:#fff;text-indent: 0px;position: relative;">

                <img src="../../../assets/images/weChatQQ/hongbao.png" width="100%" height="100%" alt="">
              </div>
              <div v-else-if="formateHongBao(item).msg.appmsg.type == 2000"
                style="background:#fff;text-indent: 0px;position: relative;">
                <div v-if="formateHongBao(item).msg.appmsg.wcpayinfo.paysubtype == 8" class="hongbaotext">
                  转账{{ formateHongBao(item).msg.appmsg.wcpayinfo.feedesc }}</div>
                <div v-if="formateHongBao(item).msg.appmsg.wcpayinfo.paysubtype == 4" class="hongbaotext">
                  已退还{{ formateHongBao(item).msg.appmsg.wcpayinfo.feedesc }}</div>
                <div v-if="formateHongBao(item).msg.appmsg.wcpayinfo.paysubtype == 3" class="hongbaotext">
                  收到转账{{ formateHongBao(item).msg.appmsg.wcpayinfo.feedesc }}</div>
                <div v-if="formateHongBao(item).msg.appmsg.wcpayinfo.paysubtype == 9" class="hongbaotext">
                  已被退还{{ formateHongBao(item).msg.appmsg.wcpayinfo.feedesc }}</div>
                <img src="../../../assets/images/weChatQQ/zhuanzhangleft.png" width="100%" height="100%" alt="">
                <!-- </div> -->
              </div>
              <div v-else-if="formateHongBao(item).msg.appmsg.type == 5"
                style="background:#fff;text-indent: 0px;position: relative;">
                <a :href="formateHongBao(item).msg.appmsg.url" target="_blank">
                  <div
                    style="text-indent: 0px;background:rgb(233, 233, 233);border:1px solid #ccc;padding-bottom:2px;cursor: pointer;padding:10px;">
                    <div class="hrefBox">
                      <div class="hrefBoxLeftBox">
                        <span class="grefTitleSpan"
                          :title="formateHongBao(item).msg.appmsg.title">{{ formateHongBao(item).msg.appmsg.title }}</span>
                        <p class="hrefBoxContentDeatils" :title="formateHongBao(item).msg.appmsg.des">
                          {{ formateHongBao(item).msg.appmsg.des }}</p>
                      </div>
                      <div class="hrefBoxrightBox">
                        <img width="100%" height="100%" src="../../../assets/images/weChatQQ/link.png" alt="">
                      </div>
                    </div>
                    <div class="textInfo">分享链接</div>
                  </div>
                </a>
              </div>
              <div v-else-if="formateHongBao(item).msg.appmsg.type == 17"
                style="background:rgb(233, 233, 233);text-indent: 0px;position: relative;">
                <div>
                  <div class="chat-right_triangle"></div>
                  <span>
                    {{ formateHongBao(item).msg.appmsg.title }} <i class="el-icon-location-outline"></i></span>
                </div>
              </div>
              <div v-else-if="formateHongBao(item).msg.appmsg.type == 33"
                style="background:#fff;text-indent: 0px;position: relative;">
                <a :href="formateHongBao(item).msg.appmsg.url" target="_blank">
                  <div
                    style="text-indent: 0px;background: #fff;border:1px solid #ccc;padding-bottom:2px;cursor: pointer;padding:10px;">
                    <div class="hrefBox">
                      <div class="hrefBoxLeftBox">
                        <span class="grefTitleSpan"
                          :title="formateHongBao(item).msg.appmsg.title">{{ formateHongBao(item).msg.appmsg.title }}</span>
                        <p class="hrefBoxContentDeatils" :title="formateHongBao(item).msg.appmsg.des">
                          {{ formateHongBao(item).msg.appmsg.des }}</p>
                      </div>
                      <div class="hrefBoxrightBox">
                        <img width="100%" height="100%" src="../../../assets/images/weChatQQ/system.png" alt="">
                      </div>
                    </div>
                    <div class="textInfo">小程序</div>
                  </div>
                </a>
              </div>
              <div v-else style="background:rgb(233, 233, 233);text-indent: 0px;position: relative;">
                <div>
                  <div class="chat-left_triangle"></div>
                  <span> 该消息类型暂无法展示<i style="margin-left:15px;color:#faad14;" class="el-icon-warning"></i></span>
                  <span class="viewsInfoDetailsMessages" @click="viewsErroMessagesDetails(item)">查看详情</span>
                </div>
              </div>
            </div>
            <!-- Left --> <!-- 视频 -->
            <div v-else-if="item.msgtype == 43" class="chat-sender" style="margin-bottom:.2rem;margin-top:10px;">
              <div><img :src="item.contactavatar" @error="errorHandler"/></div>
              <div>{{ item.sendernick }}<span style="margin-left:.05rem;">{{ formDate(item.msgtime) }}</span> <span
                  style="color:red;" v-if="item.recovery == 1"><i style="font-weight:1000;"
                    class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div style="text-indent: 0px;">
                <div class="demo-image__preview">
                  <video width="100%" controls :src="item.respath"></video>
                </div>
              </div>
            </div>

            <!-- Left --> <!-- 分享链接 公众号 -->
            <div v-else-if="item.msgtype == 486539313 || item.msgtype == 285212721" class="chat-sender"
              style="margin-bottom:.2rem;margin-top:10px;">
              <div><img :src="item.contactavatar" @error="errorHandler"/></div>
              <div>{{ item.sendernick }}<span style="margin-left:.05rem;">{{ formDate(item.msgtime) }}</span> <span
                  style="color:red;" v-if="item.recovery == 1"><i style="font-weight:1000;"
                    class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div style="text-indent: 0px;background: #fff;border:1px solid #ccc;padding-bottom:2px;cursor: pointer;">
                <div class="hrefBox">
                  <a :href="systemPublic(item.contant).url" target="_blank">
                    <div class="hrefBoxLeftBox">
                      <span class="grefTitleSpan">{{ systemPublic(item.contant).title }}</span>
                    </div>
                  </a>
                </div>
                <div class="textInfo">分享链接</div>
              </div>
            </div>
            <!-- Left --> <!-- 分享链接 公众号 -->
            <div v-else-if="item.msgtype == 318767153" class="chat-sender" style="margin-bottom:.2rem;margin-top:10px;">
              <div><img :src="item.contactavatar" @error="errorHandler"/></div>
              <div>{{ item.sendernick }}<span style="margin-left:.05rem;">{{ formDate(item.msgtime) }}</span> <span
                  style="color:red;" v-if="item.recovery == 1"><i style="font-weight:1000;"
                    class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div style="text-indent: 0px;background: #fff;border:1px solid #ccc;padding-bottom:2px;cursor: pointer;">
                <div class="chat-left_triangle"></div>
                <p style="word-wrap: break-word;">
                  <span v-if="formatePublic(item).html">{{ item.contant }}</span>
                  <span v-else>{{ formatePublic(item).msg.appmsg.title }}
                    <br>
                    <el-divider></el-divider>
                    <p v-for="(y, k) in formateWXZF(formatePublic(item).msg.appmsg.des)" :key="k"
                      style="min-height:20px;margin-bottom:10px;width: 200px;">
                      <!-- <span v-html="formateWXZF(formatePublic(item).msg.appmsg.des)"></span> -->
                      <span style="width: 80px;color:#ccc;display:inline-block">{{ y.title }}</span>
                      <span>{{ y.content }}</span>
                    </p>
                  </span>

                </p>
              </div>
            </div>
            <!-- Left --> <!-- qq邮箱 -->
            <div v-else-if="item.msgtype == 35" class="chat-sender" style="margin-bottom:.2rem;margin-top:10px;">
              <div><img :src="item.contactavatar" @error="errorHandler"/></div>
              <div>{{ item.sendernick }}<span style="margin-left:.05rem;">{{ formDate(item.msgtime) }}</span> <span
                  style="color:red;" v-if="item.recovery == 1"><i style="font-weight:1000;"
                    class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div style="text-indent: 0px;background: #fff;border:1px solid #ccc;padding-bottom:2px;cursor: pointer;">
                <div class="chat-left_triangle"></div>
                <p style="word-wrap: break-word;">
                  <span v-if="formatePublic(item).html">{{ item.contant }}</span>
                  <span v-else>QQ邮箱 {{ formatePublic(item).msg.pushmail.content.date }}
                    <br>
                    <span>内容：{{ formatePublic(item).msg.pushmail.content.digest }}</span>
                    <br>
                    <el-divider></el-divider>
                    <span>来自:{{ formatePublic(item).msg.pushmail.content.fromlist.item.name }}
                      ({{ formatePublic(item).msg.pushmail.content.fromlist.item.addr }})</span>
                  </span>

                </p>
              </div>
            </div>
            <!-- Left --> <!-- 分享链接 公众号 -->
            <div v-else-if="item.msgtype == -1879048183" class="chat-sender" style="margin-bottom:.2rem;margin-top:10px;">
              <div><img :src="item.contactavatar" @error="errorHandler"/></div>
              <div>{{ item.sendernick }}<span style="margin-left:.05rem;">{{ formDate(item.msgtime) }}</span> <span
                  style="color:red;" v-if="item.recovery == 1"><i style="font-weight:1000;"
                    class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div style="text-indent: 0px;background: #fff;border:1px solid #ccc;padding-bottom:2px;cursor: pointer;">
                <div class="chat-left_triangle"></div>
                <p style="word-wrap: break-word;min-width:200px;">
                  <span v-if="formatePublic(item).html">{{ item.contant }}</span>
                  <span v-else>{{ formatePublic(item).msg.appmsg.title }}
                  </span>
                </p>
              </div>
            </div>

            <!-- Left --> <!-- 步数 公众号 -->
            <div v-else-if="item.msgtype == -1879048185" class="chat-sender" style="margin-bottom:.2rem;margin-top:10px;">
              <div><img :src="item.contactavatar" @error="errorHandler"/></div>
              <div>{{ item.sendernick }}<span style="margin-left:.05rem;">{{ formDate(item.msgtime) }}</span> <span
                  style="color:red;" v-if="item.recovery == 1"><i style="font-weight:1000;"
                    class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div style="text-indent: 0px;background: #fff;border:1px solid #ccc;padding-bottom:2px;cursor: pointer;">
                <div class="chat-left_triangle"></div>
                <p style="word-wrap: break-word;min-width:200px;"
                  @click="viewsBuShu(formatePublic(item).msg.appmsg.hardwareinfo.rankview.rankinfolist.rankinfo)">
                  <span v-if="formatePublic(item).html">{{ item.contant }}</span>
                  <span class="bushubox" style="font-size:12px;color:#747373;" v-else>
                    <span class="mingci">
                      {{ formatePublic(item).msg.appmsg.hardwareinfo.messagenodeinfo.championusername }}
                      {{ formatePublic(item).msg.appmsg.title }}
                      <br>
                      <p style="margin-bottom:20px;"></p>
                      <span>名次：</span>
                      <span
                        style="font-size:25px;color:#07c060;">{{ formatePublic(item).msg.appmsg.hardwareinfo.messagenodeinfo.rankinfo.rank.rankdisplay }}</span>
                      <span style="margin-left:40px;">步数：</span>
                      <span
                        style="font-size:25px;color:#07c060;">{{ formatePublic(item).msg.appmsg.hardwareinfo.messagenodeinfo.rankinfo.score.scoredisplay }}</span>
                      <br>
                      <el-divider></el-divider>
                      <br>
                      <span>点击查看排行</span>
                    </span>
                  </span>
                </p>
              </div>
            </div>
            <!-- Left --> <!-- 无法解析 -->
            <div v-else class="chat-sender" style="margin-bottom:.2rem;margin-top:10px;">
              <div><img :src="item.contactavatar" @error="errorHandler"/></div>
              <div>{{ item.sendernick }}<span style="margin-left:.05rem;">{{ formDate(item.msgtime) }}</span> <span
                  v-if="item.recovery == 1" class="delClass" style="color:red;"><i style="font-weight:1000;"
                    class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div>
                <div class="chat-left_triangle"></div>
                <span> 该消息类型无法展示<i style="margin-left:15px;color:#faad14;" class="el-icon-warning"></i></span>
                <span class="viewsInfoDetailsMessages(item)" @click="viewsErroMessagesDetails(item)">查看详情</span>
              </div>
            </div>
          </div>
          <!-- ************************************************发送区******************************************************* -->

          <div v-else>

            <div v-if="item.msgtype == 10000 || item.msgtype == 10002 || item.msgtype == 570425393" class="chat-sender"
              id="systemTips" style="margin-bottom:.2rem;margin-top:10px;">
              <div :title="formateHongBaoSystem(item)">{{ formateHongBaoSystem(item) }}</div>
            </div>
            <!-- Right --> <!-- 分享链接 公众号 -->
            <div v-else-if="item.msgtype == 318767153" class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
              <div><img :src="self" @error="errorHandler"/></div>
              <div>{{ item.sendernick }}<span style="margin-left:.05rem;">{{ formDate(item.msgtime) }}</span> <span
                  style="color:red;" v-if="item.recovery == 1"><i style="font-weight:1000;"
                    class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div style="text-indent: 0px;background: #fff;border:1px solid #ccc;padding-bottom:2px;cursor: pointer;">
                <div class="chat-left_triangle"></div>
                <p style="word-wrap: break-word;">
                  <span v-if="formatePublic(item).html">{{ item.contant }}</span>
                  <span v-else>{{ formatePublic(item).msg.appmsg.title }}
                    <el-divider style="margin:10 0;"></el-divider>
                    <!-- <span v-html="formateWXZF(formatePublic(item).msg.appmsg.des)"></span> -->
                    <p v-for="(y, k) in formateWXZF(formatePublic(item).msg.appmsg.des)" :key="k">
                      <!-- <span v-html="formateWXZF(formatePublic(item).msg.appmsg.des)"></span> -->
                      <span>{{ y.title }}</span>
                      <span>{{ y.content }}</span>
                    </p>
                  </span>
                </p>
              </div>
            </div>

            <!-- Right --> <!-- 分享链接 公众号 -->
            <div v-else-if="item.msgtype == -1879048183" class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
              <div><img :src="self" @error="errorHandler"/></div>
              <div>{{ item.sendernick }}<span style="margin-left:.05rem;">{{ formDate(item.msgtime) }}</span> <span
                  style="color:red;" v-if="item.recovery == 1"><i style="font-weight:1000;"
                    class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div style="text-indent: 0px;background: #fff;border:1px solid #ccc;padding-bottom:2px;cursor: pointer;">
                <div class="chat-left_triangle"></div>
                <p style="word-wrap: break-word;min-width:200px;">
                  <span v-if="formatePublic(item).html">{{ item.contant }}</span>
                  <span v-else>{{ formatePublic(item).msg.appinfo.title }}
                  </span>
                </p>
              </div>
            </div>

            <!-- Right --> <!-- 步数 公众号 -->
            <div v-else-if="item.msgtype == -1879048185" class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
              <div><img :src="self" @error="errorHandler"/></div>
              <div>{{ item.sendernick }}<span style="margin-left:.05rem;">{{ formDate(item.msgtime) }}</span> <span
                  style="color:red;" v-if="item.recovery == 1"><i style="font-weight:1000;"
                    class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div style="text-indent: 0px;background: #fff;border:1px solid #ccc;padding-bottom:2px;cursor: pointer;">
                <div class="chat-left_triangle"></div>
                <p style="word-wrap: break-word;min-width:200px;">
                  <span v-if="formatePublic(item).html">{{ item.contant }}</span>
                  <span v-else>{{ formatePublic(item).msg.appinfo.title }}
                  </span>
                </p>
              </div>
            </div>


            <!-- Right --> <!-- 发送气泡 -->
            <div v-else-if="item.msgtype == 1 || item.msgtype == 808180" class="chat-receiver"
              style="margin-bottom:.2rem;margin-top:10px;">
              <div><img :src="self" @error="errorHandler"/></div>
              <div>{{ item.sendernick }}<span style="margin-left:.05rem;">{{ formDate(item.msgtime) }}</span> <span
                  style="color:red;" v-if="item.recovery == 1"><i style="font-weight:1000;"
                    class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div>
                <div class="chat-right_triangle"></div>
                <span style="word-wrap: break-word;">
                  {{ item.contant }}</span>
              </div>
            </div>
            <!-- Right --> <!-- 红包2001 链接5 小程序33 共享位置17 转账2000 -->
            <div v-else-if="item.msgtype == 49" class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
              <div><img :src="self" @error="errorHandler"/></div>
              <div>{{ item.sendernick }}<span style="margin-left:.05rem;">{{ formDate(item.msgtime) }}</span> <span
                  style="color:red;" v-if="item.recovery == 1"><i style="font-weight:1000;"
                    class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div v-if="formateHongBao(item).msg.appmsg.type == 2001"
                style="background:#fff;text-indent: 0px;position: relative;">

                <img src="../../../assets/images/weChatQQ/hongbaoright.png" width="100%" height="100%" alt="">
              </div>
              <div v-else-if="formateHongBao(item).msg.appmsg.type == 2000"
                style="background:#fff;text-indent: 0px;position: relative;">
                <div v-if="formateHongBao(item).msg.appmsg.wcpayinfo.paysubtype == 8" class="hongbaotext">
                  转账{{ formateHongBao(item).msg.appmsg.wcpayinfo.feedesc }}</div>
                <div v-if="formateHongBao(item).msg.appmsg.wcpayinfo.paysubtype == 4" class="hongbaotext">
                  已退还{{ formateHongBao(item).msg.appmsg.wcpayinfo.feedesc }}</div>
                <div v-if="formateHongBao(item).msg.appmsg.wcpayinfo.paysubtype == 3" class="hongbaotext">
                  收到转账{{ formateHongBao(item).msg.appmsg.wcpayinfo.feedesc }}</div>
                <div v-if="formateHongBao(item).msg.appmsg.wcpayinfo.paysubtype == 9" class="hongbaotext">
                  已被退还{{ formateHongBao(item).msg.appmsg.wcpayinfo.feedesc }}</div>
                <img src="../../../assets/images/weChatQQ/rightzhuanzhangright.png" width="100%" height="100%" alt="">
                <!-- </div> -->
              </div>
              <div v-else-if="formateHongBao(item).msg.appmsg.type == 5"
                style="background:#fff;text-indent: 0px;position: relative;">
                <a :href="formateHongBao(item).msg.appmsg.url" target="_blank">
                  <div
                    style="text-indent: 0px;background: #fff;border:1px solid #ccc;padding-bottom:2px;cursor: pointer;padding:10px;">
                    <div class="hrefBox">
                      <div class="hrefBoxLeftBox">
                        <span class="grefTitleSpan"
                          :title="formateHongBao(item).msg.appmsg.title">{{ formateHongBao(item).msg.appmsg.title }}</span>
                        <p class="hrefBoxContentDeatils" :title="formateHongBao(item).msg.appmsg.des">
                          {{ formateHongBao(item).msg.appmsg.des }}</p>
                      </div>
                      <div class="hrefBoxrightBox">
                        <img width="100%" height="100%" src="../../../assets/images/weChatQQ/link.png" alt="">
                      </div>
                    </div>
                    <div class="textInfo">分享链接</div>
                  </div>
                </a>
              </div>
              <div v-else-if="formateHongBao(item).msg.appmsg.type == 17"
                style="background:#b2e281;text-indent: 0px;position: relative;">
                <div>
                  <div class="chat-right_triangle"></div>
                  <span>
                    {{ formateHongBao(item).msg.appmsg.title }} <i class="el-icon-location-outline"></i></span>
                </div>
              </div>
              <div v-else-if="formateHongBao(item).msg.appmsg.type == 33"
                style="background:#fff;text-indent: 0px;position: relative;">
                <a :href="formateHongBao(item).msg.appmsg.url" target="_blank">
                  <div
                    style="text-indent: 0px;background: #fff;border:1px solid #ccc;padding-bottom:2px;cursor: pointer;padding:10px;">
                    <div class="hrefBox">
                      <div class="hrefBoxLeftBox">
                        <span class="grefTitleSpan"
                          :title="formateHongBao(item).msg.appmsg.title">{{ formateHongBao(item).msg.appmsg.title }}</span>
                        <p class="hrefBoxContentDeatils" :title="formateHongBao(item).msg.appmsg.des">
                          {{ formateHongBao(item).msg.appmsg.des }}</p>
                      </div>
                      <div class="hrefBoxrightBox">
                        <img width="100%" height="100%" src="../../../assets/images/weChatQQ/system.png" alt="">
                      </div>
                    </div>
                    <div class="textInfo">小程序</div>
                  </div>
                </a>
              </div>
              <div v-else style="background:rgb(233, 233, 233);text-indent: 0px;position: relative;">
                <div>
                  <div class="chat-right_triangle"></div>
                  <span> 该消息类型暂无法展示<i style="margin-left:15px;color:#faad14;" class="el-icon-warning"></i></span>
                  <span class="viewsInfoDetailsMessages" style="position: relative;left:-270px;"
                    @click="viewsErroMessagesDetails(item)">查看详情</span>
                </div>
              </div>
            </div>
            <!-- Right --> <!-- 图片 -->
            <div v-else-if="item.msgtype == 3 || item.msgtype == 2 || item.msgtype == 47" class="chat-receiver"
              style="margin-bottom:.2rem;margin-top:10px;">
              <div><img :src="self" @error="errorHandler"/></div>
              <div>{{ item.sendernick }}<span style="margin-left:.05rem;">{{ formDate(item.msgtime) }}</span> <span
                  style="color:red;" v-if="item.recovery == 1"><i style="font-weight:1000;"
                    class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div style="text-indent: 0px;">
                <div class="demo-image__preview">
                  <el-image style="width:100%; height: 100%" :src="formateImg(item)" :preview-src-list="srcList">
                  </el-image>
                </div>
              </div>
            </div>
            <!-- Right --> <!-- 引用 -->
            <div v-else-if="item.msgtype == 499 || item.msgtype == -499" class="chat-receiver"
              style="margin-bottom:.2rem;margin-top:10px;">
              <div><img :src="item.contactavatar" /></div>
              <div>{{ item.sendernick }}<span style="margin-left:.05rem;">{{ formDate(item.msgtime) }}</span> <span
                  style="color:red;" v-if="item.recovery == 1"><i style="font-weight:1000;"
                    class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div>
                <div class="chat-right_triangle"></div>
                <span>{{ item.contant }}</span>
              </div>
            </div>
            <!-- Right --> <!-- 语音 -->
            <div v-else-if="item.msgtype == 34" class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
              <div><img :src="self" @error="errorHandler"/></div>
              <div>{{ item.sendernick }}<span style="margin-left:.05rem;">{{ formDate(item.msgtime) }}</span> <span
                  style="color:red;" v-if="item.recovery == 1"><i style="font-weight:1000;"
                    class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div class="yuyin">
                <span class="infoYuYin" @click="detailsAuideInfo(item)" title=""><i
                    class="iconfont icon-info-circle-fill"></i></span>
                <div class="chat-right _triangle"></div>
                <span><i class="iconfont icon-saying"></i> 语音气泡</span>
              </div>
            </div>
            <!-- Right --> <!-- 语音通话 -->
            <div v-else-if="item.msgtype == 50" class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
              <div><img :src="self" @error="errorHandler"/></div>
              <div>{{ item.sendernick }}<span style="margin-left:.05rem;">{{ formDate(item.msgtime) }}</span> <span
                  style="color:red;" v-if="item.recovery == 1"><i style="font-weight:1000;"
                    class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div>
                <div class="chat-right_triangle"></div>
                <span>{{ formateAudioCall(item).text }}<i style="margin-left:15px;font-weight:1000;"
                    :class="formateAudioCall(item).icon"></i></span>
              </div>
            </div>
            <!-- Right --> <!-- 名片 -->
            <div v-else-if="item.msgtype == 42" class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
              <div><img :src="self" @error="errorHandler"/></div>
              <div>{{ item.sendernick }}<span style="margin-left:.05rem;">{{ formDate(item.msgtime) }}</span> <span
                  style="color:red;" v-if="item.recovery == 1"><i style="font-weight:1000;"
                    class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div style="background:#fff;text-indent: 0px;">
                <div class="nameCard" @click="viewsFriendCard(formateCard(item).msg)">
                  <div class="contentNameCard">
                    <img height="" :src="formateCard(item).msg._bigheadimgurl" alt="">
                    <div class="nameCardNameTExt">{{ formateCard(item).msg._nickname }}</div>
                  </div>
                  <div class="nameSiren" style="text-algin:left ! important;">个人名片</div>
                </div>
              </div>
            </div>
            <!-- Left --> <!-- 转发聊天记录 -->
            <div v-else-if="item.msgtype == 353 || item.msgtype == -19" class="chat-receiver"
              style="margin-bottom:.2rem;margin-top:10px;">
              <div><img :src="self" @error="errorHandler"/></div>
              <div>{{ item.sendernick }}<span style="margin-left:.05rem;">{{ formDate(item.msgtime) }}</span> <span
                  style="color:red;" v-if="item.recovery == 1"><i style="font-weight:1000;"
                    class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div
                style="background:#fff;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);cursor: pointer;padding-bottom:2px;"
                @click="viewsMessageFriendList(messageRemrd(item.contant))">
                <!-- <div class="chat-left_triangle"></div> -->
                <span class="titleMessageBoxBox"
                  :title="messageRemrd(item.contant).desc">{{ messageRemrd(item.contant).desc }}</span>
                <div style="text-algin:left;width:100%;margin-left:12px;font-size:12px;color:#b3b2b2;">
                  <p>{{ messageRemrd(item.contant).desc }}</p>
                </div>
                <div class="bottomName">聊天记录</div>
              </div>
            </div>
            <!-- Left --> <!-- 文件 -->
            <div v-else-if="item.msgtype == 5" class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
              <div><img :src="self" @error="errorHandler"/></div>
              <div>{{ item.sendernick }}<span style="margin-left:.05rem;">{{ formDate(item.msgtime) }}</span> <span
                  style="color:red;" v-if="item.recovery == 1"><i style="font-weight:1000;"
                    class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div style="background:#fff;text-indent: 0px;">
                <div class="nameCard" @click="downLoadFile(item.respath)">
                  <div class="contentNameCard">
                    <img height="" src="../../../assets/images/weChatQQ/file.png" alt="">
                    <div class="nameCardNameTExt">{{ item.contant }}</div>
                  </div>
                  <div class="nameSiren">点击打开文件</div>
                </div>
              </div>
            </div>
            <!-- Right --> <!-- 位置 -->
            <div v-else-if="item.msgtype == 48" class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
              <div><img :src="self" @error="errorHandler"/></div>
              <div>{{ item.sendernick }}<span style="margin-left:.05rem;">{{ formDate(item.msgtime) }}</span> <span
                  style="color:red;" v-if="item.recovery == 1"><i style="font-weight:1000;"
                    class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div style="text-indent: 0px;">
                <div class="map">
                  <div class="mapTitle">
                    <div style="width: 100%;overflow:hidden;text-overflow:ellipsis;white-space: nowrap;">
                      {{ formdatePosition(item)._poiname }}</div>
                    <span
                      style="display:block;color:#6e6e6ea6;width:230px;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space: nowrap;">{{ formdatePosition(item)._label }}</span>
                  </div>
                  <p class="mapBox">
                    <position style="float:none;" v-if="formdatePosition(item)" :position="formdatePosition(item)" />
                  </p>
                </div>
              </div>
            </div>
            <!-- Left --> <!-- qq邮箱 -->
            <div v-else-if="item.msgtype == 35" class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
              <div><img :src="self" @error="errorHandler"/></div>
              <div>{{ item.sendernick }}<span style="margin-left:.05rem;">{{ formDate(item.msgtime) }}</span> <span
                  style="color:red;" v-if="item.recovery == 1"><i style="font-weight:1000;"
                    class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div style="text-indent: 0px;background: #fff;border:1px solid #ccc;padding-bottom:2px;cursor: pointer;">
                <div class="chat-right_triangle"></div>
                <p style="word-wrap: break-word;">
                  <span v-if="formatePublic(item).html">{{ item.contant }}</span>
                  <span v-else>QQ邮箱 {{ formatePublic(item).msg.pushmail.content.date }}
                    <br>
                    <span>内容：{{ formatePublic(item).msg.pushmail.content.digest }}</span>
                    <br>
                    <el-divider></el-divider>
                    <span>来自:{{ formatePublic(item).msg.pushmail.content.fromlist.item.name }}
                      ({{ formatePublic(item).msg.pushmail.content.fromlist.item.addr }})</span>
                  </span>

                </p>
              </div>
            </div>
            <!-- 无法解析单独显示 -->
            <div v-else class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
              <div><img :src="self" @error="errorHandler"/></div>
              <div>{{ item.sendernick }}<span style="margin-left:.05rem;">{{ formDate(item.msgtime) }}</span> <span
                  style="color:red;" v-if="item.recovery == 1"><i style="font-weight:1000;"
                    class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div style="text-indent: 0px;">
                <div style="text-indent: 0px;position: relative;">
                  <div>
                    <div class="chat-right_triangle"></div>
                    <span> 该消息类型暂无法展示<i style="margin-left:15px;color:#faad14;" class="el-icon-warning"></i></span>
                    <span class="viewsInfoDetailsMessages" style="position: relative;left:6%;"
                      @click="viewsErroMessagesDetails(item)">查看详情</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 没有更多的文本提示 -->
        <div class="loadingBoxbottom" v-if="showLoading" style="color:#2196f3;width: 100%; text-align: center;"><i
            :class="loadClass" style="color:#2196f3"></i> {{ loadingText }}
        </div>
      </div>
    </div>

    <!-- 查看语音包Message详情 -->
    <a-modal title="语音详情" :maskClosable="false" :getContainer="getRefsAff" :footer="null" width="80%"
      :visible="visibleAudio" :confirm-loading="confirmLoading" @ok="handleOk" @cancel="handleCancel">
      <div class="audioBox">
        <div class="pathBox">
          <div class="itemAudio bottomBorder" style="border-top-right-radius: 5px;">
            <audio ref="audioDom" :src="codeSrc" controls></audio>
            时间：{{ formDate(audioData.msgtime) }}
            <el-button size="small" style="margin-left:20px;" @click="playAudioFile(audioData.respath)"
              v-html="html"></el-button>
          </div>
          <div class="itemAudio" style="border-bottom-right-radius: 5px;">
            <i class="el-icon-document-copy copy" @click.stop="copyAddress(audioData.respath)" title="复制"
              style="margin-right:10px;"></i>本地路径：{{ audioData.respath }}
          </div>
        </div>
      </div>
    </a-modal>
    <!-- 查看转发聊天记录详情 -->
    <a-modal :maskClosable="false" :getContainer="getRefsAff" :footer="null" :title="MessageFriendTitle" :width="500"
      :visible="MessageFriendContentVisible" @ok="handleOkMessageFriend" @cancel="handleCancelMessageFriend">
      <div class="listBox">
        <div class="chatRecord" v-for="(item, index) in messageRDataList" :key="index">
          <div class="friendAvatar">
            <img style="width:70%;height:70%;" src="../../../assets/images/weChatQQ/chartImg.png" alt="">
          </div>
          <div>
          </div>
          <div class="" style="background:#efeeee;padding:10px;border-radius:10px;" v-if="(item.msg instanceof Array)">
            <p style="">{{ item.sourcename }} 转发聊天记录</p>
            <div style="width:350px;border-bottom:1px solid#fff;padding-top:15px;" v-for="(i, j) in item.msg" :key="j">
              <div v-if="(i.msg instanceof Array)">
                <p style="margin-bottom:10px;">{{ i.sourcename }} 转发聊天记录中的转发聊天记录</p>
                <div v-for="(x, y) in i.msg" :key="y">
                  <div style="padding-left:20px;">
                    <p>{{ x.sourcename }}：{{ x.msg }}</p>
                    <p style="margin-bottom:15px;">{{ x.time }}</p>
                  </div>
                </div>
              </div>
              <div v-else style="padding-left:20px;">
                <p>{{ i.sourcename }}：{{ i.msg }}</p>
                <p style="margin-bottom:15px;">{{ i.time }}</p>
              </div>
            </div>
          </div>
          <div class="chatRecordContent" v-else>
            <div class="chatRecordContentLeft">
              <div class="friendNames" style="font-size:13px;color:#898989d9;">{{ item.sourcename }}</div>
              <div class="friendNames friendNamesContent" style="font-size:1000;" title="详情提示">{{ item.msg }}</div>
            </div>
            <div class="chatRecordDate">{{ item.time }}</div>
          </div>
        </div>
      </div>
    </a-modal>
    <!-- 查看推荐好友名片 -->
    <a-modal v-model="modal2Visible" :maskClosable="false" :getContainer="getRefsAff" :footer="null" title="个人名片" centered
      @ok="() => (modal2Visible = false)">
      <div class="cardContent">
        <img width="100px" height="100px" :src="card._bigheadimgurl" alt="">
        <div class="cardTextInfo" v-if="card">
          <p style="font-weight:1000;display:flex;align-items:center;font-size:20px;">{{ card._nickname }}</p>
          <p>昵称:{{ card._fullpy }}</p>
          <p v-if="card._sex == 1">性别:男</p>
          <p v-else-if="card._sex == 2">性别:女</p>
          <p v-else>性别:未知</p>
          <p>地区:{{ card._province }}-{{ card._city }}</p>
        </div>
      </div>

    </a-modal>
    <!-- 无法解析消息类型详情 -->
    <a-modal v-model="erroMessageModel" :maskClosable="false" :getContainer="getRefsAff" :footer="null" title="消息详情"
      centered @ok="() => (erroMessageModel = false)">
      <div v-if="unKnowData">
        {{ unKnowData.contant }}
      </div>
    </a-modal>

    <!-- 步数排行 -->
    <a-modal v-model="bushuShow" :maskClosable="false" :getContainer="getRefsAff" width="400px" :footer="null"
      title="步数排行" centered @ok="() => (bushuShow = false)">
      <div v-if="bushuList">
        <el-table height="80vh" :data="bushuList" border style="width: 100%">
          <el-table-column prop="address" label="名次" width="50" align="center">
            <template slot-scope="scope">{{ scope.row.rank.rankdisplay }}</template>
          </el-table-column>
          <el-table-column prop="username" label="微信号" align="center" width="180">
          </el-table-column>
          <el-table-column prop="name" label="步数">
            <template slot-scope="scope">{{ scope.row.score.scoredisplay }} 步</template>
          </el-table-column>

        </el-table>
      </div>
    </a-modal>
  </div>
</template>

<script>

import position from '../map/position.vue'
import { getWeChatFriendMessageList, searchFunction } from '@/api/weChat/weChat_api'
import { parseTime } from '@/utils/index'
import { getFormateCode } from '@/api/media/media_api'
import loadingTem from '../loading/index.vue'
import { throttle } from 'lodash';


const x2js = require('x2js');
const x2jsone = new x2js(); //实例
export default {
  props: ['chatWithObj', 'accountData', "recovery"],
  name: "wechatpublic2",
  components: {
    position,
    loadingTem
  },
  data() {
    return {
      errorSrc:require('@/assets/imgError.png'),

      loadClass: 'el-icon-loading',
      loadingText: '正在加载. . .',
      showLoading: false,

      bushuShow: false,
      codeSrc: '',
      audioData: '',
      html: '点击转码',
      showLoadingBox: false,
      size: '100px',
      card: '',
      messageRDataList: [],
      offset: 1,
      limit: 20,
      searchWord: '',
      form: {
        type: [],
        delivery: ''
      },
      unKnowData: '',
      total: 0,
      self: '',
      messageData: [],
      erroMessageModel: false,
      modal2Visible: false,
      MessageFriendContentVisible: false,
      MessageFriendTitle: '聊天记录',
      icon: 'el-icon-video-play',
      visibleAudio: false,
      confirmLoading: false,
      url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F512%2F0PQ2123I9%2F120PQ23I9-10-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1646980202&t=e8f5aecc7763071d76513929b701069d',
      srcList: [],
      bushuList: [],
      wordsToReplace:
        [
          '付款金额',
          '收款方',
          '支付方式',
          '付款方式',
          '收单机构',
          '昨日支出',
          '昨日入账',
          '本月统计',
          '使用提醒',
          '备注',
          '提现银行',
          '提现时间',
          '到账时间',
          '预计到账时间',
          '优惠名称',
          '优惠额度',
          '有效期',
          '使用提醒',
          '收款账户',
          '转账备注',
          '商品详情',
          '商户名称',
          '退款方式',
          '成功时间',
          '退款原因',
          '退款时间',
          '转账时间',
          '收款账户',
          '汇总',
          '交易状态',
          '券名称',
          '过期时间',
          '乘车时间',
          '签约时间',
          '签约时长',
          '签约商户',
          '签约项目',
          '上月支出',
          '上月入账',
          '服务名称',
          '开通账号',
          '关闭时间',
          '商家名称',
          '扣费项目',
          '使用提醒',
          '退款方式',
          '成功时间',
          '商品详情',
          '领取有效期',
          '服务方',
          '服务信息',
          '服务开始时间',
          '退款金额',
          '商品详情',
          '商户名称',
          '扣费内容',
          '扣费服务',
          '扣费金额',
          '解除授权服务',
          '解除授权范围',
          '服务开始时间',
          '服务订单计',
          '用户账号',
          '退还时间',
          '开通时间',
          '开通帐号',
          '开通人',
          '收款金额',

          '付款留言',
          '商品详情',
          '退还原因',
          '我的分数',
          '取消原因',
          '权益'
        ]
    }
  },

  watch: {
    '$store.state.account.publicData2': function () {
      this.offset = 1
      this.total = 0
      this.getMessage()
    }
  },
  created() {

  },
  methods: {
    //图片加载失败的回调
    errorHandler(e){
      e.target.src = this.errorSrc
    },
    //滚动加载更多触发的回调
    throttleFn: throttle(function () {
      // 获取列表元素
      const list = this.$refs.messageRef2;
      if (list.scrollTop == 0 && list.scrollHeight == 0) return;

      // 判断滚动到底部
      if (list.scrollTop + list.clientHeight + 10 + 10 >= list.scrollHeight) {


        this.showLoading = true;
        if (this.messageData.length) {
          if (this.messageData.length < this.total) {
            this.loadClass = 'el-icon-loading';
            this.loadingText = '正在加载. . .';

            this.onSearchScroll();
          } else{
            this.loadClass = 'el-icon-success';
            this.loadingText = '到底了，没有更多了！';
          }

        } else {
        }
      }
    }, 1000),

    onSearchScroll(){
      this.self = this.accountData.avatar
      // this.total=this.chatWithObj.cnt
      let data = {
        proof_num: this.chatWithObj.proof_num,
        account_id: this.chatWithObj.account_id,
        contactid: this.chatWithObj.username,
        recovery: this.recovery,
        searchkey: this.searchWord,
        offset: ++this.offset ,
        limit: this.limit
      }
      searchFunction(data, '/search/tencent/content').then(res => {
        try {
          this.messageData.push(...res.data)
          this.total =res.data[0].cnt
          res.data.forEach(element => {
            this.srcList.push(element.respath)
          });
        } catch (error){
          console.error(error)
        }

      })

    },

    formateWXZF(str) {
      let itemData = [];
      let array = str.split('\n');
      for (let index = 0; index < array.length; index++) {
        let c = {
          title: '',
          content: ''
        }
        const element = array[index];
        for (let i = 0; i < this.wordsToReplace.length; i++) {
          const data = this.wordsToReplace[i];
          if (element.includes(data)) {
            c = {
              title: data,
              content: element.replace(data, '')
            }
            break;
          }
        }
        itemData.push(c)
      }
      return itemData;
    },
    viewsBuShu(list) {
      this.bushuShow = true
      this.bushuList = list
    },
    copyAddress(valueData) {
      let oInput = document.createElement("input");
      //这边为链接地址this.liveLink='www.baidu.com'
      oInput.value = valueData;
      document.body.appendChild(oInput);
      oInput.select();
      document.execCommand("Copy");
      oInput.remove();
      this.$message({
        message: "复制成功",
        type: "success",
      });
    },
    getRefsAff() {
      return this.$parent.domFunction();
    },
    // 公众号推送格式化
    formatePublic(item) {
      try {
        let xml = item.contant,
          xmlDo = x2jsone.xml2js(xml);
        return xmlDo
      } catch (err) {
        return item.replace(/[^\u4e00-\u9fa5]/gi, "");
      }
    },
    // 公众号链接推送格式化
    systemPublic(item) {
      try {
        let data = {
          title: item.split('[url]')[0],
          url: item.split('[url]')[1]
        }
        return data
      } catch (err) {
        return false
      }
    },
    // 格式化转发聊天记录
    messageRemrd(item) {
      let reg = /\\/g;
      let str = item.replace(reg, '');
      return JSON.parse(str)
    },
    // 下载文件
    downLoadFile(path) {
      let data = {
        filePath: path
      }
      openFilePosition(data).then(res => {

      })

    },
    // 格式化位置信息
    formdatePosition(item) {
      let xml = item.contant,
        xmlDo = x2jsone.xml2js(xml);
      try {
        return xmlDo.msg.location
      } catch (err) {

      }
    },
    // 格式化名片分享
    formateCard(item) {
      let xml = item.contant,
        xmlDo = x2jsone.xml2js(xml);
      return xmlDo
    },
    //格式化语音通话
    formateAudioCall(item) {
      try {
        if (item.contant.indexOf('recvtime') > 0 && item.contant.split('<invitetype>')[1].split("</invitetype>")[0] == 0) {
          let data = {
            text: '视频通话-时长' + item.contant.split('<duration>')[1].split("</duration>")[0] + '秒',
            icon: 'el-icon-video-camera'
          }
          return data
        } else {
          let data = {
            text: '语音通话-时长' + item.contant.split('<duration>')[1].split("</duration>")[0] + '秒',
            icon: 'el-icon-phone-outline'
          }
          return data
        }
      } catch (err) {
        let data = {
          text: '未知的语音或视频通话',
          icon: 'el-icon-question'
        }
        return data;
      }
    },
    // 格式化红包
    formateHongBao(item) {
      let xml = item.contant,
        xmlDo = x2jsone.xml2js(xml);
      return xmlDo
    },
    // 收红包
    formateHongBaoSystem(item) {
      if (item.contant.indexOf('img') == -1) {
        return item.contant
      } else {
        return item.contant.replace(/[^\u4e00-\u9fa5]/gi, "")
      }
    },
    // 格式化图片路径
    formateImg(item) {
      let xml = item.contant,
        xmlDo = x2jsone.xml2js(xml);
      if (item.respath == '') {
        try {
          try {
            return xmlDo.msg.emoji._cdnurl
          } catch (err) {
            // return
          }
        } catch (exception) {
          // alert('解析失败')
        }
      } else {
        return item.respath
      }
    },
    formDate(date) {
      return parseTime(date)
    },
    getMessage() {
      this.messageData = []
      this.self = this.accountData.avatar
      this.total = this.chatWithObj.cnt
      let data = {
        proof_num: this.chatWithObj.proof_num,
        account_id: this.chatWithObj.account_id,
        recovery: 0,
        contactid: this.chatWithObj.username,
        offset: this.offset,
        limit: this.limit
      }
      getWeChatFriendMessageList(data).then(res => {
        this.$refs.messageRef2.scrollTop = 0
        this.messageData = res.data
        res.data.forEach(element => {
          this.srcList.push(element.respath)
        });
      })
    },
    //打印
    printPdf(index, row) {
      // this.$print(this.$refs.print) // 使用
      let dom = this.$refs.messageRef2
      dom.style['box-shadow'] = "none"
      dom.style['overflow-y'] = "visible"
      let focuser = setInterval(() => window.dispatchEvent(new Event('focus')), 500);
      printJS({
        printable: 'ddddqq2',
        type: 'html',
        documentTitle: '',
        // css:'../../../styles/weChat.css',
        //properties: [
        //    { field: 'name', displayName: '姓名', columnSize:`50%`},
        //    { field: 'sex', displayName: '性别',columnSize:`50%`},
        //],
        // header: ``,
        // style:'',
        // gridHeaderStyle:'font-size:12px; padding:3px; border:1px solid; font-weight: 100; text-align:left;',
        // gridStyle:'font-size:12px; padding:3px; border:1px solid; text-align:left;',
        // repeatTableHeader: true,
        // scanStyles:false,
        targetStyles: ['*'],
        ignoreElements: ['no-print', 'bc', 'gb'],
        onPrintDialogClose: () => {//取消打印回调
          clearInterval(focuser);
          dom.style.height = "85vh"
          dom.style['overflow-y'] = "auto"
        }
      })
    },
    onSearchFirst() {
      this.offset = 1
      this.onSearch()
    },
    // 搜索聊天内容
    onSearch(vlaue) {
      this.messageData = []
      this.self = this.accountData.avatar
      // this.total=this.chatWithObj.cnt
      let data = {
        proof_num: this.chatWithObj.proof_num,
        account_id: this.chatWithObj.account_id,
        contactid: this.chatWithObj.username,
        recovery: this.recovery,
        searchkey: this.searchWord,
        offset: this.offset,
        limit: this.limit
      }
      searchFunction(data, '/search/tencent/content').then(res => {
        try {
          this.$refs.messageRef2.scrollTop = 0
          this.messageData = res.data.reverse()
          this.total = res.data[0].cnt
          res.data.forEach(element => {
            this.srcList.push(element.respath)
          });
        } catch {

          this.messageData = []
          this.total = 0
        }

      })

    },
    // 查看无法解析的消息类型详情
    viewsErroMessagesDetails(item) {
      this.unKnowData = item
      this.erroMessageModel = true
    },
    // 查看名片
    viewsFriendCard(data) {
      this.card = data
      this.modal2Visible = true
    },
    // 查看分享聊天记录
    viewsMessageFriendList(item) {
      this.messageRDataList = item.msg
      this.MessageFriendContentVisible = true
    },
    // 播放语音
    playAudioFile(url) {
      this.html = `正在转码请稍后...<i class="el-icon-loading"/>`
      let data = {
        mediaPath: url.respath,
        mediaType: 1
      }
      getFormateCode(data).then(res => {
        this.html = `转码完成<i class="el-icon-check"/>`
        this.codeSrc = res.data[0].direction

      }).catch(err => {
      })
    },
    detailsAuideInfo(item) {
      this.html = "点击转码"
      this.audioData = item
      this.codeSrc = ''
      this.visibleAudio = true
    },
    handleOk(e) {
      this.ModalText = 'The modal will be closed after two seconds';
      this.confirmLoading = true;
      setTimeout(() => {
        this.visibleAudio = false;
        this.confirmLoading = false;
      }, 500);
    },
    handleCancel(e) {
      this.visibleAudio = false;
    },
    handleOkMessageFriend() {
      this.MessageFriendContentVisible = false;
    },
    handleCancelMessageFriend() {
      this.MessageFriendContentVisible = false;
    },
    // 聊天内容分页
    handleSizeChange(val) {
      this.limit = val
      this.onSearch()
    },
    handleCurrentChange(val) {
      this.offset = val
      this.onSearch()
    }
  }
};
</script>
<style >
.el-icon-circle-close {
  color: #Fff;

}
</style>
<style scoped>
.itemBUshu {
  display: flex;
  justify-content: space-between;
  height: 25px;
  border-bottom: 1px solid rgb(232, 232, 232);
  align-items: center;
}

.topbox {
  height: 150px;

}

.block {
  text-align: center;
  width: 100%;
  display: flex;
  align-items: center;
}

.loadingBox {
  position: relative;
  top: 40px;
  z-index: 100;
  text-align: center;
  line-height: 100px;
}

#systemTips {
  text-align: center;
  margin-bottom: 10px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgb(146, 146, 146);
  font-size: 12px;
}

.nameCardNameTExt {
  margin-left: 20px;
}

.viewsInfoDetailsMessages {
  position: relative;
  right: -70px;
  top: 0px;
  font-size: 13px;
  font-weight: none;
  text-decoration: underline;
  color: #409eff;
  cursor: pointer;
}

.viewsInfoDetailsMessages:hover {
  color: #0616f5;
}

.cardContent {
  height: 100px;
  display: flex;

}

.cardTextInfo {
  padding-left: 20px;
}

.cardTextInfo>p {
  margin-bottom: 3px;
  font-size: 14px;
}

.grefTitleSpan {
  display: block;
  width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hrefBox {
  width: 250px;
  height: 47px;
  display: flex;
  align-items: center;
}

.hrefBox>div {
  height: 50px;
}

.hrefBoxLeftBox {
  width: 180px;
}

.hrefBoxrightBox {
  width: 40px;
  margin: 0 !important;
}

.hrefBoxContentDeatils {
  width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.textInfo {
  float: left;
  width: 230px;
  margin: 0 !important;
  border-top: 1px solid #ccc;
  padding-top: 2px !important;
}

.block {
  text-align: center;
}

.listBox {
  display: block;
  min-height: 700px;
  overflow-y: auto;
}

.chatRecordDate {
  width: 100px;
  height: 60px;
  line-height: 60px;
  font-size: 12px;
}

.chatRecordContentLeft {
  height: 60px;
  width: 290px;
  padding-left: 20px;
}

.friendNamesContent {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friendNames {
  height: 30px;
  line-height: 30px;
}

.chatRecordContent {
  min-height: 60px;
  width: 400px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(231, 231, 231);
  /* background: #409eff; */
}

.pathBox {
  height: 100px;
  width: 100%;
  font-size: 12px;
}

.audioBox {
  width: 100%;
  height: 100px;
  display: flex;
  padding: 0 15px;
}

.chatRecord {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.friendAvatar {
  width: 60px;
  height: 60px;
}

.bottomName {
  border-top: 1px solid #ccc;
  float: left;
  height: 20px;
  width: 100%;
  margin: 0 !important;
  text-indent: 0px;
  margin-top: 5px !important;

}

.titleMessageBoxBox {
  display: block;
  padding-left: 12px;
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

p {
  margin: 0;
}

#playAudio {
  position: absolute;
  font-size: 23px;
  color: #dfdfdf;
  top: 34.5%;
  left: 34.5%;
  cursor: pointer;
  margin: auto;
}

.bottomBorder {
  border-bottom: 1px solid rgb(224, 224, 224);
}

.AudioLogo {
  position: relative;
  width: 78.14px;
  height: 78.14px;
  background: #e2e2e2;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.itemAudio {
  height: 39px;
  background: #f3f3f3;
  width: 625.18px;
  padding: 9.3px;
  display: flex;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pathBox {
  height: 100px;
}

.audioBox {
  width: 100%;
  height: 100px;
  display: flex;
  padding: 0 15px;
}

.infoYuYin {
  position: absolute;
  top: -7px;
  right: -7px;
  color: rgb(192, 192, 192);
  transition: .1s linear;
}

.infoYuYin:hover {
  color: #409eff;
  transition: .1s linear;
  transform: scale(1.1);
}

.yuyin {
  cursor: pointer;
  position: relative;
  width: 60%;
}

.nameSiren {
  height: 15.6px;
  width: 250px;
  float: left;
  margin: 0 !important;
  border-top: 1px solid rgb(219, 219, 219);
  text-indent: 18px;
}

.contentNameCard {
  height: 56.26px;
  width: 100%;
  padding: 10px 20px;
  display: flex;
}

.nameCard {
  width: 250px;
  height: 73.6px;
  background: rgb(243, 243, 243);
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  cursor: pointer;
}

.hongbaotext {
  position: absolute;
  right: 25px;
  top: 15px;
  color: #Fff;

}

.fenyeqi {
  /* float: left; */
  margin-top: 10px;
}

.mainContentBoxMessage {
  height: 500px;
}

.mapBox {
  width: 100px;
  height: 80px;
  /* float: left; */
}

.mapTitle {
  width: 100%;
  height: 50px;
  padding: .03rem;
  float: left;

}

.map {
  width: 233px;
  height: 206px;
  background: #fff;
  border-radius: 4px;
}

.messageImg {
  display: block;
  width: 100%;
  height: 100%;
}

.chat-sender {
  margin-top: 0 !important;
}

.messageBoxFather {
  width: 100%;
  /* min-width:429px; */
  max-height: 785px;

}

.messageBox {
  margin: 0 auto;
  padding: 10px 20px;
  background: rgb(253, 253, 253);
  height: 79vh;
  overflow-y: auto;
  border-radius: 5px;
  /* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) */
}

.messageContentTitle {
  height: 56.26px;
  background: rgb(255, 255, 255);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  border-radius: 5px;
  margin-bottom: 10px;
}

.friendName {
  line-height: 22.39px;
  font-size: 13px;
}
</style>

<style scoped>
.leftMessage {}

/* 气泡样式 */
body {
  background-color: #ebebeb;
  font-family: -apple-system;
  font-family: "-apple-system", "Helvetica Neue", "Roboto", "Segoe UI",
    sans-serif;
}

.chat-sender {
  clear: both;
  font-weight: bold;
}

.chat-sender div:nth-of-type(1) {
  float: left;
}

.chat-sender div:nth-of-type(2) {
  margin: 0 20px 2px 50px;
  padding: 0px;
  color: #848484;
  font-size: 60%;
  text-align: left;
}

.chat-sender div:nth-of-type(3) {
  background-color: rgb(233, 233, 233);
  float: left;
  max-width: 250px;
  margin: 0 20px 10px 10px;
  padding: 10px 10px 10px 10px;
  border-radius: 7px;
  text-indent: -12px;
}

.chat-receiver {
  clear: both;
  font-weight: bold;
}

.chat-receiver div:nth-of-type(1) {
  float: right;
}

.chat-receiver div:nth-of-type(2) {
  margin: 0px 50px 2px 50px;
  padding: 0px;
  color: #848484;
  font-size: 60%;
  text-align: right;
}

.chat-receiver div:nth-of-type(3) {
  float: right;
  max-width: 250px;
  background-color: #b2e281;
  margin: 0px 10px 10px 10px;
  padding: 10px 10px 10px 10px;
  border-radius: 7px;
}

.chat-receiver div:first-child img,
.chat-sender div:first-child img {
  width: 40px;
  height: 40px;
  /*border-radius: 10%;*/
}

.chat-left_triangle {
  height: 0px;
  width: 0px;
  border-width: 6px;
  border-style: solid;
  border-color: transparent rgb(233, 233, 233) transparent transparent;
  position: relative;
  left: -22px;
  top: 3px;
  overflow: hidden;
}

.chat-right_triangle {
  height: 0px;
  width: 0px;
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent transparent #b2e281;
  position: relative;
  right: -22px;
  top: 3px;
}

.chat-notice {
  clear: both;
  font-size: 70%;
  color: white;
  text-align: center;
  margin-top: 15px;
  margin-bottom: 15px;
}

.chat-notice span {
  background-color: #ececec;
  line-height: 25px;
  border-radius: 5px;
  padding: 5px 10px;
}

.messageBox::-webkit-scrollbar {
  width: 8px;
}

/* <!--修改 滚动条的 下面 的 样式--> */
.messageBox::-webkit-scrollbar-track {
  background-color: rgb(252, 252, 252);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

/* <!--修改 滑块 --> */
.messageBox::-webkit-scrollbar-thumb {
  background-color: #dfdfdf;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

.hongbaotext {
  position: absolute;
  right: 50px;
  top: 40px;
  color: #Fff;
}

/* 当屏幕宽度大于2560时 */
@media screen and (min-width: 2360px) {
  .nameSiren {
    height: 0.06rem;
    width: 1rem;
    float: left;
    margin: 0 !important;
    border-top: 1px solid rgb(219, 219, 219);
    text-indent: .07rem;
  }

  .contentNameCard {
    height: 0.24rem;
    width: 100%;
    padding: 10px 20px;
    display: flex;
  }

  .nameCard {
    width: 1rem;
    height: .31rem;
    background: rgb(243, 243, 243);
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    cursor: pointer;
  }

  .hongbaotext {
    position: absolute;
    width: 150px;
    right: .15rem;
    top: .1rem;
    color: #Fff;
    font-size: 13px;
  }

  .messageBox {
    margin: 0 auto;
    width: 1.7rem;
    height: 5rem;
    padding: 10px 20px;
    background: rgb(253, 253, 253);
    /* height: 4.54rem; */
    max-height: 81vh;
    /* height: auto; */
    /* height: 600px; */
    overflow-y: auto;
    border-radius: 5px;
    /* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); */
  }

  .chat-receiver div:nth-of-type(3) {
    float: right;
    max-width: 1.1rem;
    background-color: #b2e281;
    margin: 0px 10px 10px 20px;
    padding: 10px 10px 10px 10px;
    border-radius: 7px;
  }

  .chat-sender div:nth-of-type(3) {
    background-color: rgb(233, 233, 233);
    float: left;
    max-width: 1.1rem;
    margin: 0 20px 10px 10px;
    padding: 10px 10px 10px 10px;
    border-radius: 7px;
    text-indent: -12px;
  }

  .map {
    width: 1rem;
    height: 1rem;
    background: #fff;
    border-radius: 4px;
  }

  .mapTitle {
    width: 100%;
    height: .2rem;
    padding: .03rem;
    float: left;
  }

  .friendName {
    line-height: 0.1rem;
    font-size: 0.07rem;
  }

  .messageContentTitle {
    height: 0.3rem;
    width: 1.7rem;
    background: rgb(255, 255, 255);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    border-radius: 5px;
    border-bottom: 1px solid rgb(230, 230, 230);
    margin-bottom: 10px;
  }

  .messageBoxFather {
    width: 1.1rem;
    min-width: 403px;

  }

  .AudioLogo {
    position: relative;
    width: .5rem;
    height: .5rem;
    background: #e2e2e2;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
  }

  .itemAudio {
    height: .25rem;
    background: #f3f3f3;
    width: 2.1rem;
    padding: .06rem;
    display: flex;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pathBox {
    height: .5rem;
  }

  .audioBox {
    width: 100%;
    height: .5rem;
    display: flex;
    padding: 0 .1rem;
  }

  .hrefBox {
    width: 1rem;
    height: .2rem;
    display: flex;
    align-items: center;
  }

  .hrefBox>div {
    height: .2rem;
  }

  .hrefBoxLeftBox {
    width: .8rem;
  }

  .hrefBoxrightBox {
    width: .2rem;
    margin: 0 !important;
  }

  .hrefBoxContentDeatils {
    width: .7rem;
    height: .2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .textInfo {
    float: left;
    width: 1rem;
    margin: 0 !important;
    border-top: 1px solid #ccc;
    padding-top: 2px !important;
  }

  .grefTitleSpan {
    display: block;
    width: .7rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #playAudio {
    position: absolute;
    font-size: .16rem;
    color: #dfdfdf;
    top: 34.5%;
    left: 34.5%;
    cursor: pointer;
    margin: auto;
  }

  .screenBox {
    height: 85vh;
    background: #fff;
    overflow: hidden;
  }

  .mingci {
    display: block;
    width: 240px;
    min-height: 80px;
  }

}</style>
